<template>
  <div class="bodyy">
    <el-collapse accordion v-model="activeName">
        <el-collapse-item name="1">
        <template slot="title" >
            <div class="title">
                <img src="../../assets/2.svg" alt="">
                <span id="gphq">股票行情</span>
            </div>
        </template>
        <div class="content">
            <el-descriptions :column="3"  border>
            <el-descriptions-item label="总市值" label-class-name="my-label" content-class-name="my-content">{{gphq.TVALUE}}</el-descriptions-item>
            <el-descriptions-item label="成交量" label-class-name="my-label" content-class-name="my-content" >{{gphq.TAMOUNT}}</el-descriptions-item>
            <el-descriptions-item label="今开" label-class-name="my-label" content-class-name="my-content">{{gphq.TOPENPRICE}}</el-descriptions-item>
            <el-descriptions-item label="流通市值" label-class-name="my-label" content-class-name="my-content">{{gphq.FLOWVALUE}}</el-descriptions-item>
            <el-descriptions-item label="成交额" label-class-name="my-label" content-class-name="my-content">{{gphq.TAMOUNTTOTAL}}</el-descriptions-item>
            <el-descriptions-item label="昨收" label-class-name="my-label" content-class-name="my-content">{{gphq.PPRICE}}</el-descriptions-item>
            <el-descriptions-item label="最高" label-class-name="my-label" content-class-name="my-content">{{gphq.THIGHPRICE}}</el-descriptions-item>
            <el-descriptions-item label="涨停" label-class-name="my-label" content-class-name="my-content red-font">{{gphq.TMAXPRICE}}</el-descriptions-item>
            <el-descriptions-item label="振幅" label-class-name="my-label" content-class-name="my-content">{{gphq.TRANGE}}</el-descriptions-item>
            <el-descriptions-item label="最低" label-class-name="my-label" content-class-name="my-content">{{gphq.TLOWPRICE}}</el-descriptions-item>
            <el-descriptions-item label="跌停" label-class-name="my-label" content-class-name="my-content green-font">7.48</el-descriptions-item>
            <el-descriptions-item label="换手" label-class-name="my-label" content-class-name="my-content">{{gphq.TCHANGE}}</el-descriptions-item>
            <el-descriptions-item label="市净率" label-class-name="my-label" content-class-name="my-content">7.48</el-descriptions-item>
            <el-descriptions-item label="市盈率" label-class-name="my-label" content-class-name="my-content">{{gphq.FVALUEP}}</el-descriptions-item>
            <el-descriptions-item label="股票更新时间" label-class-name="my-label" content-class-name="my-content">{{gphq.TIMESHOWGPX}}</el-descriptions-item>
            </el-descriptions>
        </div>
        </el-collapse-item>
    </el-collapse>
    <!-- <el-collapse accordion v-model="activeName">
        <el-collapse-item name="1">
        <template slot="title" >
        </template>
        </el-collapse-item>
    </el-collapse> -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name:'GPHQ',
    data(){
        return {
            activeName:'1'
        }
    },
    computed:{
        ...mapState({
            gphq:state => state.stock.stockInfo['股票行情']
        })
    },
};
</script>

<style lang="less" scoped>

.bodyy {
    padding: 0 20px 20px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(226,226,226,0.50);
    box-shadow: 0 4px 14px 0 rgba(209,225,242,0.46);
    border-radius: 2px;
    margin-top: 25px;
}
.title {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    img {
        width: 30px;
        height: 30px;
    }
    span {
        font-size: 20px;
        margin-left: 12px;
    }
}
.content {
    width: 100%;
    // height: 264px;
    // border: 1px solid #E9ECF3;
    /deep/ .my-label {
        background: rgb(237,244,255);
        width: 10%;
    }
    /deep/ .my-content {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        padding: 12px 25px;
        width: 20%;
    }
    /deep/ .red-font {
        color: red;
    }
    /deep/ .green-font {
        color: green;
    }
}
/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
    border: 1px solid #E9ECF3;
}
//修改收缩框title的高度
/deep/ .el-collapse-item__header {
    height: 70px!important;
}
</style>